<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1
			{
				width: 100px;
				height: 100px;
				background-color: aqua;
				position: absolute;
				
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				function getStyle(obj,name)
				{
					if(window.getComputedStyle)
					{
						return getComputedStyle(obj,null)[name];
					}
					else
					{
						return obj.currentStyle[name];
					}
				}
				var timer;
				//  objdiv speed 速度 zdian 终点 fangx 方向
				function move(obj,speed,zdian,fangx)
				{
					clearInterval(timer);
						var curry=parseInt(getStyle(obj,fangx));
						if(curry>zdian)
						{
							speed=-speed;
						}
						timer=setInterval(function()
						{
							
							var oldvalue=parseInt(getStyle(obj,fangx));
							var newvalue=oldvalue+speed;
							if(fangx=="left")
							{
								if((speed<0&&newvalue<zdian)||(speed>0&&zdian<newvalue))
								{
									newvalue=zdian;
								}
								obj.style.left=newvalue+"px";
							}
							if(fangx=="top")
							{
								if((speed<0&&newvalue<zdian)||(speed>0&&zdian<newvalue))
								{
									newvalue=zdian;
								}
								obj.style.top=newvalue+"px";
							}
							// if(newvalue==zdian)
							// {
							// 	clearInterval(timer);
							// }
							
						},30)
					
				}
				var btn01=document.getElementById("btn01");
				var btn02=document.getElementById("btn02");
				var btn03=document.getElementById("btn03");
				var btn04=document.getElementById("btn04");
				var box1=document.getElementById("box1");
				btn01.onclick=function()
				{
					move(box1,20,800,"left");
				}
				btn02.onclick=function()
				{
					move(box1,20,0,"left");
				}
				btn03.onclick=function()
				{
					move(box1,20,0,"top");
				}
				btn04.onclick=function()
				{
					move(box1,20,800,"top");
				}
				
			}
		</script>
	</head>
	<body style="width: 2000px; height: 2000px;">
		<div style="width: 0;height: 900px; border-left: 1px black solid; top: 0px; left: 900px; position: absolute;"></div>
		<div style="width: 900px;height: 0px; border-top: 1px black solid; top: 900px; left: 0px; position: absolute;"></div>
		<button id="btn01">向右</button>
		<button id="btn02">向左</button>
		<button id="btn03">向上</button>
		<button id="btn04">向下</button>
		<br><br><br>
		<div id="box1"></div>
		<!-- 怎么让它移动不到上面呢 -->
	
	</body>
</html>